<template>
  <div class="test">
        <el-table :data="state.tableData" style="width: 100%">
        <el-table-column fixed prop="goodsid" label="商品id" width="150" />
        <el-table-column prop="goodsname" label="商品名" width="120" />
        <el-table-column prop="goodsprereon" label="商品价格" width="120" />
        <el-table-column prop="goodsamount" label="商品库存" width="120" />
        <el-table-column prop="maxamount" label="最大库存" width="120" />
        <el-table-column prop="replenisshment" label="应补货量" width="120" />
        <el-table-column fixed="right" label="数据操作" width="200">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="handleClick(scope.row)"
                >编辑</el-button>
                <el-button :plain="true" @click="deleteRow(scope.row)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
        <!-- 分页部分 -->
        <el-pagination background layout="total, sizes, prev, pager, next, jumper"
            :total="state.total"  :page-size="state.pageSize" :current-page="state.currentPage"
            :page-sizes="state.pageSizes" @size-change="sizeChange" @current-change="changePage"/>
  

  </div>
</template>

<script setup>

import { onMounted,ref} from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

// 创建响应式数据
const state = ref({
  tableData: [],
  total: 0,
  pageSize: 10,
  currentPage: 1,
  pageSizes: [3, 5, 10, 20, 50, 100, 200, 300, 400, 500, 1000], //可选择的一页多少条
});

var goodslistData = ref({ list:[] });
// 发请求接收数据
onMounted(()=>{
    goodslist();
})
const goodslist = ()=>{
    axios.post('/api/user/amount').then((res)=>{
        goodslistData.value.list = res.data.list;

        goodslistpage();
    });
};
const goodslistpage =()=>{
    state.value.tableData = goodslistData.value.list.slice(
        (state.value.currentPage - 1) * state.value.pageSize,
      state.value.currentPage * state.value.pageSize,
    );
    state.value.total = goodslistData.value.list.length;
}
const changePage = (val) => {
  console.log("翻页，当前为第几页", val);
  state.value.currentPage = val;
  goodslist();
};
const sizeChange = (val) => {
  console.log("改变每页多少条，当前一页多少条数据", val);
  state.value.pageSize = val;
  state.value.currentPage = 1;
  goodslist();
};



</script>

<style>

</style>